<template>
  <div class="right-content win-flex-column">
    <el-tabs v-model="currTabName" @tab-click="handleTabClick">
      <el-tab-pane label="工作区" name="work">
        <Work />
      </el-tab-pane>
      <el-tab-pane label="AI模型设置" name="aiModelSetting">
        <AiModelSetting />
      </el-tab-pane>
      <!-- <el-tab-pane label="场控助手" name="liveAssistant">
        <LiveAssistant v-if="currTabName == 'liveAssistant'" />
      </el-tab-pane> -->
      <el-tab-pane label="话术维护" name="scriptConfig">
        <ScriptConfig v-if="currTabName == 'scriptConfig'" />
      </el-tab-pane>
      <el-tab-pane label="意见箱" name="suggest">
        <Suggest v-if="currTabName == 'suggest'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { EventBus } from '@/event-bus.js';
export default {
  name: 'Right',
  components: {
    Work: resolve => require(['./work/index.vue'], resolve),
    AiModelSetting: resolve => require(['./aiModelSetting/index.vue'], resolve),
    LiveAssistant: resolve => require(['./liveAssistant/index.vue'], resolve),
    ScriptConfig: resolve => require(['./scriptConfig/index.vue'], resolve),
    Suggest: resolve => require(['./suggest/index.vue'], resolve),
  },
  data() {
    return {
      currTabName: 'work',
    };
  },
  created() {
    EventBus.$on('jumpToAi', () => {
      this.currTabName = "aiModelSetting";
    });
  },
  beforeDestroy() {
    EventBus.$off();
  },
  computed: {
  },
  methods: {
    handleTabClick() {
      if (this.currTabName == 'work') {
        EventBus.$emit('refreshDirectory');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.right-content {
  border: 1px solid var(--color-border-first);
  border-left: none;
  overflow: scroll;

  ::v-deep .el-tabs__nav-wrap {
    padding-left: 10px;
  }

  //隐藏滚动条
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }


}
</style>
